<template>
	<view class="content">
		<view class="search-box">
			<u-search @search="doneSearch(1)" @custom="doneSearch(1)" v-model="keywords" class="search-box-u-search" shape="square" placeholder="搜索其实很简单" :clearabled="true" :animation="true"></u-search>
		</view>
		<view class="search-done">
			<navigator :url="'/pages/workorder/kbs?id=' + item.id" v-for="(item, index) in res" :key="index" class="category-item">
				<image class="category-logo" :src="item.logo_image"></image>
				<view class="category-info">
					<view class="category-title">{{item.name}}</view>
					<view class="category-introduce">{{item.desc}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				keywords: '',
				category: 0,
				next: false,
				res: []
			}
		},
		onLoad(query) {
			this.type = query.type ? query.type : 'category'
			this.category = query.category ? query.category : 0
			this.doneSearch()
		},
		onReachBottom: function () {
			if (this.next) {
				this.doneSearch(this.next)
			}
		},
		methods: {
			doneSearch: function (page = 1) {
				var that = this
				that.$u.api.search({
					type: that.type,
					page: page,
					keywords: that.keywords,
					category: that.category
				}).then(res => {
					if (res.code == 1) {
						let page = parseInt(res.data.page)
						that.next = res.data.next ? (page + 1):false
						
						if (page == 1) {
							that.res = res.data.res
						} else {
							that.res = that.res.concat(res.data.res)
						}
					} else {
						that.$u.toast(res.msg);
					}
				}).catch(res => {
					that.$u.toast('请求失败，请重试！');
				})
			}
		}
	}
</script>

<style>
.content {
	width: 94%;
	margin: 0 auto;
}
.search-box {
	margin: 20rpx auto;
	width: 96%;
}
.search-icon {
	padding: 0 10rpx;
}
.search-input {
	font-size: 30rpx;
	width: 100%;
}
.category-item {
	display: flex;
	align-items: center;
	padding: 10rpx;
}
.category-logo {
	width: 120rpx;
	height: 120rpx;
	min-width: 120rpx;
	min-height: 120rpx;
	padding-right: 20rpx;
}
.category-title {
	font-size: 30rpx;
	font-weight: bold;
}
.category-introduce {
	font-size: 28rpx;
	color: #888;
}
</style>
